import react from 'react'
// import './swiper.scss'


export default class swiper extends react.Component {
    constructor(props) {
        super(props)
        this.state = {
            BannerList: []
        }
    }
    // 渲染完成
    componentDidMount() {
        this.$axios.get('https://apipc-xiaotuxian-front.itheima.net/home/banner').then(res => {
            if (res.data.msg == '操作成功') {
                this.state.BannerList = res.data.result
                this.setState({
                        BannerList: this.state.BannerList
                    },
                    ()=>{
                        this.swiperInit()
                    }
                )
            }
        })
    }
    swiperInit() {
        new Swiper(".swiper", {
            pagination: {
                el: ".swiper-pagination",
            },
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            speed: 1000,
            autoplay: {
                delay: 1000,
                pauseOnMouseEnter: true,
                disableOnInteraction: false
            },
            loop: true,

        });
    }
    render() {
        const { BannerList } = this.state
        return (
            <div id="banner">
                <div className="swiper">
                    <div className="swiper-wrapper">
                        {BannerList.map((item) => {
                            return (
                                <div className="swiper-slide" key={item.id}>
                                    <img src={item.imgUrl} alt="" />
                                </div>
                            )
                        })}
                    </div>
                    <div className="swiper-pagination"></div>
                    <div className="swiper-button-next"></div>
                    <div className="swiper-button-prev"></div>
                </div>
            </div>
        )
    }
}